<template>
    <!-- 消息弹窗的设计，写在其他页面都不利于维护，且会造成渲染多次的情况，因此写在此处 -->
    <el-dialog title="商品规格选择" :visible.sync="createModel" width="80%" top="5vh">
        <el-container style="height:70vh;position: relative; margin: -30px,-20px;">
            <!-- el-aside和el-main都可以分别滚动 -->
            <el-container>
                <el-aside width="200px" style="position: absolute; top: 0; left: 0; bottom: 50;"
                    class="bg-white border-right">
                    <!-- 侧边 | 规格卡片标题 -->
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item list-group-item-action" v-for="(item, index) in skusList"
                            :key="index" :class="skuIndex === index ? 'sum-active' : ''" @click="changeSku(index)">{{
                                item.name }}</li>

                    </ul>
                </el-aside>
                <el-footer style="position: absolute; left: 0; bottom: 0; width: 200px; height: 50px; display: flex; align-items: center;justify-self: center"
                    class="bg-white border-top border-bottom">
                    <!-- 底部 | 已选规格属性 -->
                    <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
                        layout="prev, next" :total="page.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </el-footer>
                <el-container>
                    <el-header style="position: absolute; top:0;left: 200px;right: 0;height: 60px; line-height: 60px;"
                        class="border-top border-bottom">
                        <el-button type="primary" size="mini" @click="dochooseAll">{{ isChooseAll ? '取消全选' : '全选'
                            }}</el-button>
                    </el-header>
                    <el-main style="position: absolute; top: 60px; left: 200px; bottom: 0px; right: 0;">
                        <!-- 主内容 -->
                        <div class="d-flex flex-wrap">
                            <span class="border rounded py-1 px-2 m-2" style="cursor: pointer;"
                                v-for="(item, index) in skuItems" :key='index' :class="item.ischeck ? 'sum-active' : ''"
                                @click="choose(item)">
                                {{ item.name }}
                            </span>
                        </div>
                    </el-main>
                </el-container>
            </el-container>

        </el-container>
        <span slot="footer" class="dialog-footer">
            <el-button @click="createModel = false">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import common from '@/common/mixins/common';
export default {
    mixins: [common],
    data() {
        return {
            preUrl:'skus',
            loading: false,

            skusList: [], // 规格列表

            createModel: false,
            callback: false,

            chooseList: [],
            skuIndex: 0,
            // skuslist: [
            //     {
            //         name: '规格卡片1',
            //         type: 0,
            //         list: [{
            //             id: 1,
            //             name: '黄色',
            //             image: '',
            //             color: '',
            //             ischeck: false,
            //         }, {
            //             id: 2,
            //             name: '红色',
            //             image: '',
            //             color: '',
            //             ischeck: false,

            //         }],
            //     }, {
            //         name: '规格卡片2',
            //         type: 1,
            //         list: [{
            //             id: 3,
            //             name: '短袖',
            //             image: '',
            //             color: '',
            //             ischeck: false,

            //         }, {
            //             id: 4,
            //             name: '裤子',
            //             image: '',
            //             color: '',
            //             ischeck: false,

            //         }],
            //     }
            // ],
        }
    },
    computed: {
        // 当前规格下的属性列表
        skuItems() {
            let item = this.skusList[this.skuIndex];
            return item ? item.list : []
        },
        // 是否全选
        isChooseAll() {
            return this.skuItems.length === this.chooseList.length
        }
    },
    created() {

    },
    methods: {
        getListResult(e){
            this.skusList = e.list.map(item=>{
                let list = item.default.split(',');
                // 将默认值转换成数组
                item.list = list.map(name => {
                    return {
                        name: name,
                        ischeck: false,
                        image: '',
                        color: ''
                    }
                })
                // console.log(e);
                
                item.list = []
                return item
            })
        },
        chooseSkus(callback) {
            // 是一个回调函数，接收sku-card-children扥res并传值给他，在子组件sku-card-children也能拿到123
            // callback('123')
            this.callback = callback
            this.createModel = true
        },
        confirm() {
            // 点击确定之后，将选择的值传递会去
            if (typeof this.callback === 'function') {
                let item = this.skusList[this.skuIndex];
                this.callback({
                    item:item.id,
                    name: item.name,
                    type: item.type,
                    list: this.chooseList,
                })
            }
            // 关闭弹窗
            this.hide()
        },

        // 关闭弹出层
        hide() {
            this.unchooseAll(),
                this.createModel = false;
            this.callback = false;
        },

        // 切换规格卡片
        changeSku(index) {
            // 先取消上一个选项卡的选中状态
            this.unchooseAll(),
                this.skuIndex = index
        },
        // 选中规格属性
        choose(item) {
            // 之前未选中
            if (!item.ischeck) {
                this.chooseList.push(item);
                // 修改选中状态
                return item.ischeck = true;
            }
            // 之前选中
            // 找到当前对象在chooseList中的索引
            // 找到list中的id看是都与自己的item的id相同，相同的话就返回
            let index = this.chooseList.findIndex(v => {
                return v.id === item.id
            })
            // 找不到
            if (index < 0) return;
            this.chooseList.splice(index, 1);
            item.ischeck = false;
        },
        // 选中/取消选中
        dochooseAll() {
            let list = this.skusList[this.skuIndex].list;
            // 已经全选
            if (this.isChooseAll) {
                return this.unchooseAll()
            }
            // 全选
            this.chooseList = list.map(v => {
                // 设置全选状态
                v.ischeck = true;
                return v;
            })
        },
        // 取消选中，在切换了左侧的选项卡时，需要更新chooseList的状态，不然全选和取消全选状态无法更新
        // 取消选中素有
        unchooseAll() {
            let list = this.skusList[this.skuIndex].list;
            // 取消全选
            // 取消选中状态
            list.forEach(v => {
                v.ischeck = false
            })
            // 清空选中列表
            return this.chooseList = []
        }
    }
}
</script>
<style>
.sum-active {
    background-color: rgb(177, 177, 220);
    color: aliceblue;
}
</style>